<template>
  <div style="margin: 15px; margin-right: 30px">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-form-item label="发票抬头" prop="invoiceTitle">
        <el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" />
      </el-form-item>
      <el-form-item label="开票类型" prop="type">
        <el-select v-model="form.type" filterable placeholder="开票类型" @change="changeType">
          <el-option
            v-for="item in parentData.typeOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="taxRegistrationNumber">
        <el-input v-model="form.taxRegistrationNumber" placeholder="纳税人识别号" />
      </el-form-item>
      <el-form-item label="基本开户银行" prop="bank">
        <el-select v-model="form.bank" filterable placeholder="基本开户银行">
          <el-option
            v-for="item in parentData.bankOptions"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="基本开户账号" prop="accountNumber">
        <el-input v-model="form.accountNumber" placeholder="请输入基本开户账号" />
      </el-form-item>
      <el-form-item label="注册场所地址" prop="registeredAddress">
        <el-input v-model="form.registeredAddress" placeholder="请输入注册场所地址" />
      </el-form-item>
      <el-form-item label="注册固定电话" prop="registeredFixedPhone">
        <el-input v-model="form.registeredFixedPhone" placeholder="请输入注册固定电话" />
      </el-form-item>
      <template v-if="isReceiverUserCodeShow">
        <el-form-item label="实际收票人" prop="receiverUserCode">
          <el-select v-model="form.receiverUserCode" placeholder="实际收票人">
            <el-option
              v-for="item in receiverUserCodeOptions"
              :key="item.partyCode"
              :label="item.userName"
              :value="item.partyCode"
            />
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="收件人联系电话" prop="receiverPhone">
        <el-input v-model="form.receiverPhone" placeholder="请输入收件人联系电话" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getShipperList, addInvoiceInfo } from '@/api/shipment'
import {validatePhone, validateTelephone} from '@/utils/validate'
export default {
  name: 'InvoiceMessageAdd',
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          areaOptions: [],
          typeOptions: [],
          bankOptions: []
        }
      }
    }
  },
  data() {
    return {
      companyCode: '',
      receiverUserCodeOptions: [],
      isReceiverUserCodeShow: true,
      form: {
        userCode: '',
        invoiceTitle: '',
        receiverPhone: '',
        taxRegistrationNumber: '',
        bank: '',
        accountNumber: '',
        registeredAddress: '',
        registeredFixedPhone: '',
        type: '',
        receiverUserCode: ''
      },
      rules: {
        receiverUserCode: [
          { required: true, message: '请选择实际收票人', trigger: 'change' },
          { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
        ],
        invoiceTitle: [
          { required: true, message: '请输入发票抬头', trigger: 'blur' },
          { min: 1, max: 255, message: '长度在 1 到 255个字符', trigger: 'blur' }
        ],
        receiverPhone: [
          { required: true, message: '请输入收件人联系电话', trigger: 'blur' },
          { 
            validator(rule, value, callback) {
              if(!validatePhone(value) && !validateTelephone(value)){
                callback(new Error("电话格式有误"))
              }
              else{
                 callback();
              }
            }, 
            trigger: 'blur' 
          }
        ],
        type: [
          { required: true, message: '请选择开票类型', trigger: 'change' }
        ],
        taxRegistrationNumber: [
          { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
          { min: 1, max: 128, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        bank: [
          { required: true, message: '请选择基本开户银行', trigger: 'change' }
        ],
        accountNumber: [
          { required: true, message: '请输入基本开户账号', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        registeredAddress: [
          { required: true, message: '请输入注册场所地址', trigger: 'blur' },
          { min: 1, max: 128, message: '长度在 1 到 128个字符', trigger: 'blur' }
        ],
        registeredFixedPhone: [
          { required: true, message: '请输入注册固定电话', trigger: 'blur' },
          { 
            validator(rule, value, callback) {
              if(!validatePhone(value) && !validateTelephone(value)){
                callback(new Error("电话格式有误"))
              }
              else{
                 callback();
              }
            }, 
            trigger: 'blur' 
          }
        ]
      }
    }
  },
  created(){
    this.companyCode = this.$route.query.code ? this.$route.query.code : "";
    this.form.userCode = this.$route.query.partyCode ? this.$route.query.partyCode : "";
  },
  methods: {
    // 选择开票类型
    changeType(value) {
      this.form.receiverUserCode = ''
      if (value === '0') {
        // 隐藏该项/取消验证
        this.isReceiverUserCodeShow = false
        this.rules.receiverUserCode.required = false
      } else {
        // 显示该项/增加验证
        this.isReceiverUserCodeShow = true
        this.rules.receiverUserCode.required = true
        const data = { staffType: 0 , companyCode: this.companyCode}
        switch (value) {
          case '1':
            data.staffType = 4
            break
          case '2':
            data.staffType = 6
            break
        }
        // 获取收票人选项
        getShipperList(data).then(response => {
          this.receiverUserCodeOptions = response.data.records
        })
      }
    },
    funcSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          addInvoiceInfo(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
              this.$emit('fatherAddMethod')
            })
            .then(() => this.$refs['form'].resetFields())
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'add')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.dialog-footer {
  margin: 15px 0 15px 0;
  width: 175px;
  float: right;
}
</style>
